<template>
  <div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('m.common.button.add') }}</a-button>
      <a-button @click="batchDel" type="default"  icon="delete" v-test>{{ $t('m.common.button.delete') }}</a-button>
    </div>

    <!-- table区域-begin -->
    <a-table
      :columns="columns"
      size="middle"
      :pagination="false"
      :dataSource="dataSource"
      :loading="loading"
      @expand="expandSubmenu"
      :expandedRowKeys="expandedRowKeys"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @expandedRowsChange="handleExpandedRowsChange">
      <span slot="menuNameSlot" slot-scope="text, record">
        <ych-icon v-if="record.icon" :type="record.icon" :style="{ fontSize: '15px',marginTop:'0px' }"/>
        <span style="margin-left: 4px;">{{ text }}</span>
      </span>
      <span slot="sortSlot" slot-scope="text">
          <a-tag style="width:50px;">
            {{ text }}
          </a-tag>
      </span>
      <span slot="groupMenuSlot" slot-scope="text">
          <a-tag style="width:50px;" :color="text | groupMenuFilter">
            {{ groupMenuFormat(text) }}
          </a-tag>
      </span>
      <span slot="menuTypeSlot" slot-scope="text" color="blue">
          <a-tag :color="text | menuTypeFilter">
            {{ menuTypeFormat(text) }}
          </a-tag>
      </span>


      <template slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">{{ $t('m.common.button.update') }}</a>
        <a-divider type="vertical" v-show="record.groupId==undefined || record.groupId==null || record.groupId==''"/>
        <a v-show="record.groupId==undefined || record.groupId==null || record.groupId==''" @click="handleAddSub(record)">{{$t('m.system.permission.other.add_sub')}}</a>
        <a-divider type="vertical"/>
        <a-popconfirm :title="$t('m.common.tip.delete_confirm')" @confirm="() => handleDelete(record.id)">
          <a>{{ $t('m.common.button.delete') }}</a>
        </a-popconfirm>
        <a-divider type="vertical"/>
        <a @click="handleDataRule(record)">{{$t('m.system.permission.other.data_rule')}}</a>
      </template>

    </a-table>
    <!-- table区域-end -->

    <permission-modal ref="modalForm" @ok="modalFormOk" :back="back"></permission-modal>
    <permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>

  </div>
</template>

<script>

  import PermissionModal from './modules/PermissionModal'
  import { getSystemMenuList, getSystemSubmenu, getSystemSubmenuBatch } from '@/api/api'
  import { YcListMixin } from '@/mixins/YcListMixin'
  import PermissionDataRuleList from './PermissionDataRuleList'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'NewPermissionList',
    mixins: [YcListMixin],
    components: {
      PermissionDataRuleList,
      PermissionModal,
    },
    props: {
      back: String
    },
    data () {
      return {
        columns: [
          {
            title: this.$t('m.system.permission.entity.name'),
            dataIndex: 'name',
            key: 'name',
            width: 180,
            ellipsis: true,
            scopedSlots: { customRender: 'menuNameSlot' }
          }, {
            title: this.$t('m.system.permission.entity.menuType'),
            dataIndex: 'menuType',
            key: 'menuType',
            width: 120,
            align: 'center',
            scopedSlots: { customRender: 'menuTypeSlot' },
          },
          {
            title: this.$t('m.system.permission.entity.sortNo'),
            dataIndex: 'sortNo',
            key: 'sortNo',
            width: 80,
            align: 'center',
            scopedSlots: { customRender: 'sortSlot' }
          },
          {
            title: this.$t('m.system.permission.entity.groupId'),
            dataIndex: 'groupId',
            key: 'groupId',
            width: 100,
            align: 'center',
            scopedSlots: { customRender: 'groupMenuSlot' },
          },
          {
            title: this.$t('m.system.permission.entity.component'),
            dataIndex: 'component',
            key: 'component',
            ellipsis: true,
          },
          {
            title: this.$t('m.system.permission.entity.url'),
            dataIndex: 'url',
            key: 'url',
            ellipsis: true,
          },

          {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 300
          }
        ],
        loading: false,
        expandedRowKeys: [],
        url: {
          delete: YchConstant.PREFIX_SYSTEM + '/permission/delete',
          deleteBatch: YchConstant.PREFIX_SYSTEM + '/permission/deleteBatch'
        }
      }
    },
    filters: {
      menuTypeFilter (type) {
        let value = '#108ee9'
        if (type === 0) {
          value = '#2db7f5'
        } else if (type === 1) {
          value = '#87d068'
        }
        return value
      },
      groupMenuFilter (text) {
        let value = '#2db7f5'
        if (text) {
          value = '#2db7f5'
        } else{
          value = '#87d068'
        }
        return value
      }
    },
    methods: {
      loadData () {
        this.loading = true
        getSystemMenuList({ back: this.back }).then((res) => {
          if (res.success) {
            this.dataSource = res.result
            return this.loadDataByExpandedRows(this.dataSource)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      expandSubmenu (expanded, record) {
        if (expanded && (!record.children || record.children.length === 0)) {
          getSystemSubmenu({ parentId: record.id }).then((res) => {
            if (res.success) {
              record.children = res.result
            }
          })
        }
      },
      // 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
      loadDataByExpandedRows (dataList) {
        if (this.expandedRowKeys.length > 0) {
          return getSystemSubmenuBatch({ parentIds: this.expandedRowKeys.join(',') }).then((res) => {
            if (res.success) {
              let childrenMap = res.result
              let fn = (list) => {
                list.forEach(data => {
                  if (this.expandedRowKeys.includes(data.id)) {
                    data.children = childrenMap[data.id]
                    fn(data.children)
                  }
                })
              }
              fn(dataList)
            }
          })
        } else {
          return Promise.resolve()
        }
      },
      // 打开数据规则编辑
      handleDataRule (record) {
        this.$refs.PermissionDataRuleList.edit(record)
      },
      handleAddSub(record) {
        this.$refs.modalForm.title = this.$t('m.system.permission.other.add_sub_label')
        this.$refs.modalForm.localMenuType = 1
        this.$refs.modalForm.disableSubmit = false
        this.$refs.modalForm.edit({status: '1', permsType: '1', route: true, keepAlive: true, 'parentId': record.id})
      },
      handleExpandedRowsChange (expandedRows) {
        this.expandedRowKeys = expandedRows
      },
      groupMenuFormat(text){
        return text ? this.$t('m.common.label.yes') : this.$t('m.common.label.no');
      },
      menuTypeFormat(text){
        if (text == 0) {
          return this.$t('m.system.permission.other.permission_type1')
        } else if (text == 1) {
          return this.$t('m.system.permission.other.permission_type2')
        } else if (text == 2) {
          return this.$t('m.system.permission.other.permission_type3')
        } else {
          return text
        }
      },
    }
  }
</script>
<style lang="less" scoped>

</style>
